<template>
    <view class="layout">
        <view class="navbar">
            <view class="fill" :style="{height:getStatusBarHeight()+'px'}"></view>
            <view class="content" :style="{height:getTitleBarHeight()+'px'}" >
                <view class="text1">{{title}}</view>
                <view class="search" @click="searchPage">

                    <uni-icons type="search"></uni-icons>
                    <view class="text2">搜索</view>

                </view>
            </view>

        </view>
        
    </view>
    <view class="fill1" :style="{height:getNavBarHeight()+'px'}">
        </view>
</template>

<script setup>
    import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from '../../utils/system.js'
    const props =  defineProps({
            title:{
                type:String,
                default:'推荐'
        }})
        
        const searchPage = ()=>{
            uni.navigateTo({
                url:'/pages/search/search'
            })
        }
</script>

<style lang="scss" scoped>
    .layout {
        .navbar {
            padding: 10rpx 30rpx 10rpx 30rpx;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            background:
                linear-gradient(to bottom, transparent, #fff 400rpx),
                linear-gradient(to right, #d0fff6, #e8d0ff);
            .content {
                display: flex;
                align-items: center;

                .text1 {
                    font-weight: 700;
                    font-size: 38rpx
                }

                .search {
                    width: 30vw;
                    height: 60rpx;
                    margin-left: 50rpx;
                    padding: 0 30rpx;
                    display: flex;
                    align-items: center;
                    background: rgba(255, 255, 255, 0.4);
                    border: 1px solid #fff;
                    border-radius: 60rpx;
                    color: $text-font-color-3;

                    .text2 {
                        padding-left: 20rpx;
                        font-size: 32rpx
                    }
                }
            }
        }
    }
</style>